<template>
  <gui-page
    class="gui-bg-white"
    :fullPage="true"
    :isLoading="pageLoading"
    ref="guiPage"
  >
    <template v-slot:gBody>
      <view class="gui-flex1 gui-flex gui-column msgs-container">
        <!-- #ifdef MP -->
        <view class="status_bar">
          <!-- 这里是状态栏 -->
        </view>
        <!-- #endif -->

        <!-- #ifdef APP-PLUS -->
        <view class="status_bar">
          <!-- 这里是状态栏 -->
        </view>
        <!-- #endif -->

        <view class="gui-flex1 gui-relative">
          <!--					消息列表-->
          <gui-xhs-slide-list
            :unReadData="unReadData"
            class="gui-flex1"
            :msgs="messageList"
            @itemTap="itemTap"
            @btnTap="btnTap"
            :receiveLast="receiveLast"
            ref="guiSlideList"
          ></gui-xhs-slide-list>
          <!--					@scrolltolower="loadMore"-->

          <!--					为空展示-->
          <!--					<gui-empty-->
          <!--							v-show="messageList.length==0" style="height: 500rpx;margin-top: 500rpx;">-->
          <!--						<template v-slot:img>-->
          <!--							<view class="gui-flex gui-rows gui-justify-content-center">-->
          <!--								<text class="gui-icons gui-empty-icon gui-color-gray " style="font-size: 80rpx;">&#xe6b8;-->
          <!--								</text>-->
          <!--							</view>-->
          <!--						</template>-->
          <!--						<template v-slot:text>-->
          <!--							<text-->
          <!--									class=" gui-block gui-text-center xhs-margin-top-30 gui-color-gray">暂时没有聊天消息~</text>-->
          <!--						</template>-->
          <!--					</gui-empty>-->
        </view>
      </view>

      <gui-action-sheet
        height="180"
        ref="guiactionsheet"
        @selected="selected"
        :items="actionSheetItems"
      ></gui-action-sheet>
    </template>
  </gui-page>
</template>
<script>
import getWebSocketClient from "@/Grace6/js/ws";
import commonMixin from "@/mixin/commonMinxin";

// 模拟个 api 请求的数据
export default {
  mixins: [commonMixin],
  data() {
    return {
      actionSheetItems: ["置顶聊天", "删除"],
      msgs: [],
      pageLoading: true,
      messageList: [],
      isLoad: false,
      onShowStatus: false,
      unReadData: {},
      receiveLast: {},
    };
  },
  onPullDownRefresh: function () {
    console.log("下拉刷新了");
    this.getMessageList();
    uni.stopPullDownRefresh();
  },
  onLoad: function () {
    this.getMessageList();
    this.getReceiveLast();
    this.pageLoading = false;
  },
  // onHide(){
  // 	this.onShowStatus = true
  // },
  onShow() {
    this.onShowStatus = false;
    console.log("onshow");
    if (this.isLoad) {
      this.getMessageList();
      this.getReceiveLast();
    }
    this.$nextTick(() => {
      // 监听WebSocket接受到服务器的消息事件。
      const wsClient = getWebSocketClient();
      wsClient.onSocketMessageCallback = (res) => {
        console.log("我是message页面收到消息的提示");
        console.log(res);

        if (
          res.handlerType == "1" ||
          res.handlerType == "2" ||
          res.handlerType == "3" ||
          res.handlerType == "4"
        ) {
          //点赞收藏 回复 关注
          uni.app.getTotalUnReadCount();
        }

        if (res.handlerType == "5") {
          this.getMessageList();
          uni.app.getTotalUnReadCount();
        }
        //获取总数
        if (res.handlerType == "9") {
          uni.app.setMessageTabBarBadge(res.body.totalUnReadCount);
          this.unReadData = res.body;
        }
        //获取
        if (res.handlerType == "10") {
          this.getReceiveLast();
          uni.app.getTotalUnReadCount();
        }
      };

      uni.app.getTotalUnReadCount();
    });
  },
  methods: {
    getReceiveLast() {
      uni.app.get("/auth/getReceiveLast", "", "", (res) => {
        console.log(res);
        this.receiveLast = res.data;
      });
    },
    getMessageList() {
      uni.app.get("/auth/getMessageList", "", "", (res) => {
        console.log(res);
        this.messageList = res.data;
        this.isLoad = true;
      });
    },
    selected: function (index) {
      console.log(index);
      // 返回索引，可以根据索引获取文本数据
    },
    btnTap: function (index, btnIndex) {
      console.log(index, btnIndex);
      // 第一个按钮被点击 [ 标记已读 ]
      if (btnIndex == 0) {
        if (this.msgs[index].btns[0].name == "标为已读") {
          this.msgs[index].btns = [
            { name: "标为未读", bgColor: "#888888" },
            { name: "删除消息", bgColor: "#FF0036" },
          ];
          this.msgs[index].msgnumber = 0;
        } else {
          this.msgs[index].btns = [
            { name: "标为已读", bgColor: "#323232" },
            { name: "删除消息", bgColor: "#FF0036" },
          ];
          this.msgs[index].msgnumber = 1;
        }
        setTimeout(() => {
          this.msgs.splice(index, 1, this.msgs[index]);
        }, 300);
      }
      // 第二个按钮被打开 [ 删除消息 ]
      else if (btnIndex == 1) {
        uni.showModal({
          title: "确定要删除吗?",
          success: (e) => {
            if (e.confirm) {
              this.msgs.splice(index, 1);
              this.$refs.guiSlideList.moveIndex = -1;
            }
          },
        });
      }
    },
    btnlongTap() {
      console.log("我被点击了");
      this.$refs.guiactionsheet.open();
    },
    // 列表本身被点击
    itemTap: function (e) {
      // console.log(e);
      // uni.showToast({title:"索引"+e});
      console.log(this.messageList[e]);
      let auhtor = {
        authorId: this.messageList[e].authorId,
        authorName: this.messageList[e].authorName,
      };
      uni.app.goChat(auhtor);
    },
    loadMore: function () {
      this.$refs.guiSlideList.startLoadig();
      // 模拟 api 请求，因为请求数据里没有按钮信息我们利用js进行按钮补充
      setTimeout(() => {
        // 加载全部
        // this.$refs.guiSlideList.nomore();
        // 正常加载
        for (let i = 0; i < msgsFromApi.length; i++) {
          // 具体几个按钮及按钮文本根据项目需求来，格式 {name:按钮文本, bgColor:按钮背景色}
          msgsFromApi[i].btns = [
            { name: "标为已读", bgColor: "#323232" },
            { name: "删除消息", bgColor: "#FF0036" },
          ];
        }
        this.msgs = this.msgs.concat(msgsFromApi);
        // 结束加载动画可以继续下一次的加载更多
        this.$refs.guiSlideList.endLoading();
      }, 500);
    },
  },
};
</script>
<style scoped>
<!-- #ifdef MP -->
	.msgs-container{
		min-height: 1800rpx !important;
	}
<!-- #endif -->
</style>
